<template>
	<page-meta>
	    <navigation-bar
	      title="手机验证"
	      front-color="#ffffff"
	      background-color="#046ef6"
	    />
	  </page-meta>
	<view>
			<text class="toptitle">
				验证码已发送至{{newpass()}}
			</text>
			<!-- #ifdef APP-PLUS || H5-->
			<view v-if="platform === 'ios' && !isNvue" class="uni-form-item uni-column">
				<view class="uni-input-wrapper" style="position: relative;">
					<input
						class="uni-input"
						v-for="(i, index) in code"
						:key="index"
						v-model="code[index]"
						@focus="onFocus(index)"
						@blur="onBlur(index)"
						@input="chang(index)"
					/>
					<input v-model="text" @input="chang()" maxlength="6" type="number" style="position: absolute;width: 100%;height: calc(100% - 40px);top: 0;left: 0;opacity: 0;">
				</view>
			</view>
			<view class="uni-form-item uni-column" v-else>
				<view class="uni-input-wrapper" style="position: relative;">
					<input
						class="uni-input"
						v-for="(i, index) in code"
						:key="index"
						v-model="code[index]"
					/>
					<input v-model="text" @input="chang()" maxlength="6" type="number" style="position: absolute;width: 100%;height: calc(100% - 40px);top: 0;left: 0;opacity: 0;">
				</view>
			</view>
			<!-- #endif -->
			<button
				@tap="sub"
				style="width: calc(100% - 20px);display: block;margin: 0px 10px;margin-top: 20px;background: #046ef6;border-radius: 15px;color: #fff;"
				type="default"
			>
				下一步
			</button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			platform: '',
			isNvue: false,
			idx: 0,
			code: ['', '', '', '', '', ''],
			text:'',
			phone: ''
		};
	},
	methods: {
		newpass(){
			return (this.phone+'').replace((this.phone+'').substr(3,5),'*****');
		},
		chang(idx) {
			var newt = this.text.split('');
			for(var k in this.code){
				this.code[k] = '';
			}
			for(var i in newt){
				if(i>5) i = 5;
				this.code[i] = newt[i];
			}
		},
		onFocus(idx) {
			// this.idx = idx;
			// #ifdef APP-PLUS
			this.$mp.page.$getAppWebview().setStyle({
				softinputNavBar: 'none'
			});
			// #endif
		},
		onBlur() {
			// #ifdef APP-PLUS
			this.$mp.page.$getAppWebview().setStyle({
				softinputNavBar: 'auto'
			});
			// #endif
		},
		sub() {
			var code = '';
			for (var i in this.code) {
				code += this.code[i];
			}
			// console.log(this.$store.state.url+'/api/shequuser/login/checkSms')
			uni.request({
				url: this.$store.state.url+'/api/shequuser/login/checkSms', //检查更新的服务器地址
				method: 'POST',
				data: JSON.stringify({
					faccount:this.phone,
					fpwd:'',
					fcode:code
				}),
				success: res => {
					// console.log(res)
					res = res.data;
					
					if(res.code == 200){
						uni.navigateTo({
							url: '/pages/login/relogin2?phone=' + this.phone + '&code=' + code
						});
					}else{
						uni.showToast({
							title: res.msgs,
							icon: 'none'
							// position:'top'
						});
					}
				},
				fail: res => {
					console.log(res);
				}
			});
			
		}
	},
	onLoad(e) {
		this.phone = e.phone;
		console.log(e)
		this.platform = uni.getSystemInfoSync().platform;
		// #ifdef APP-PLUS-NVUE
		this.isNvue = true;
		// #endif
	}
};
</script>

<style scoped>
	/* .uni-input-input{background: #000 !important;} */
	uni-page-body{
		min-height: 100%;
		background: #f2f5fa;
	}
	.uni-input:hover {
		border-bottom: 1px solid #007aff;
	}
.uni-input-wrapper {
	display: flex;
	flex-direction: row; /*这里可以不写，flex布局默认方向横向即row*/
	justify-content: center;
	align-items: center;
}
.uni-input-wrapper input {
	width: 35px;
	margin: 20px 13px;
	text-align: center;
	margin-top: 50px;
	height: 35px;
	border: 1px solid #ccc;
	background: #fff;
}
.toptitle{
	height: 35px;
	line-height: 35px;
	display: block;
	margin: 0 auto;
	width: 60%;
	text-align: center;
	border: 1px solid #ccc;
	border-radius: 20px;
	background: #fff;
	color: #999;
	margin-top: 30px;
	font-size: 15px;
}
</style>
